<template>
  <div ref="bigbox">
    <div class="main">
      <div class="title">
        <div class="serbox">
          <el-input placeholder="请输入订单号" v-model="searchText"> </el-input>
        </div>
        <el-select v-model="invoicesee" placeholder="请选择开票状态" clearable>
          <el-option label="申请中" value="1"></el-option>
          <el-option label="开票成功" value="2"></el-option>
          <el-option label="拒绝" value="3"></el-option>
        </el-select>
        <el-button
          type="primary"
          style="margin-left: 15px"
          size="medium"
          @click="search"
          >查询</el-button
        >
      </div>
      <div class="table">
        <el-table :data="tablerRecord" stripe style="width: 100%">
          <el-table-column label="序号" type="index" width="100">
          </el-table-column>
          <el-table-column prop="orderSn" label="订单单号"> </el-table-column>
          <el-table-column prop="goodsName" label="商品名称"> </el-table-column>
          <el-table-column label="商品单价">
            <template slot-scope="scope">
              <span>￥{{ scope.row.price }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="total" label="商品数量"> </el-table-column>
          <el-table-column label="实付金额">
            <template slot-scope="scope">
              <span>￥{{ scope.row.payment }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="seetext" label="开票状态"> </el-table-column>
          <el-table-column prop="userName" label="用户名称"> </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                @click="opendet(scope.row.id, scope.row.see)"
                type="text"
                v-if="scope.row.see == 1 || scope.row.see == 0"
                size="small"
                >开票</el-button
              >
              <el-button
                @click="opendet(scope.row.id, scope.row.see)"
                type="text"
                v-else
                size="small"
                >详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="page">
        <div class="btns">
          <!-- <el-button type="primary"
                     @click="pop_open=true">开具发票</el-button> -->
        </div>
        <el-pagination
          background
          @current-change="changePage"
          :current-page.sync="page"
          :page-size="pageSize"
          layout="total,prev,pager,next,jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <div class="pop">
      <el-dialog title="确认开票" :visible.sync="pop_det" width="50%">
        <el-form label-width="120px" :model="openpopform">
          <el-form-item label="单位名称">
            <el-input v-model="openpopform.companyName" disabled></el-input>
          </el-form-item>
          <el-form-item label="申请时间">
            <el-input v-model="openpopform.createAt" disabled> </el-input>
          </el-form-item>
          <el-form-item label="开户行账号">
            <el-input v-model="openpopform.bankCard" disabled></el-input>
          </el-form-item>
          <el-form-item label="银行名称">
            <el-input v-model="openpopform.bankName" disabled></el-input>
          </el-form-item>
          <el-form-item label="税号">
            <el-input v-model="openpopform.taxNum" disabled></el-input>
          </el-form-item>
          <el-form-item v-if="isbtn == 1">
            <el-button type="primary" @click="submit(2)">确认开票</el-button>
            <el-button type="primary" plain @click="submit(3)"
              >拒绝开票</el-button
            >
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      invoicesee: "", // 开票状态
      searchText: "", // 输入内容
      page: 1,
      pageSize: 10,
      total: 0,
      openpopform: {},
      tablerRecord: [],
      pop_det: false,
      subId: "",
      isbtn: "",
    };
  },
  mounted() {
    this.getlist();
  },
  methods: {
    getlist() {
      this.$postRequest("/mall/mallInvoiceUser/list", {
        shopId: sessionStorage.getItem("shopId"),
        see: this.invoicesee,
        orderSn: this.searchText,
        pageSize: this.pageSize,
        pageNum: this.page,
      }).then((res) => {
        this.total = res.total;
        for (var i = 0; i < res.rows.length; i++) {
          if (res.rows[i].see == 0) {
            res.rows[i].seetext = "未申请";
          } else if (res.rows[i].see == 1) {
            res.rows[i].seetext = "申请中";
          } else if (res.rows[i].see == 2) {
            res.rows[i].seetext = "开票成功";
          } else if (res.rows[i].see == 3) {
            res.rows[i].seetext = "拒绝";
          }
        }
        this.tablerRecord = res.rows;
      });
    },
    opendet(id, type) {
      this.subId = id;
      this.isbtn = type;
      this.$getRequest("/mall/mallInvoiceUser/" + id, {}).then((res) => {
        if (res.code == 200) {
          this.openpopform = res.data;
          this.pop_det = true;
        }
      });
    },
    submit(e) {
      this.$postRequest("/mall/orderOrder/invoice", {
        shopId: sessionStorage.getItem("shopId"),
        orderId: this.subId,
        check: e,
      }).then((res) => {
        this.$message.success("操作成功");
        this.pop_det = false;
        this.getlist();
      });
    },
    changePage() {
      this.$refs.bigbox.parentElement.scrollTo(0, 0);
      this.getlist();
    },
    search() {
      this.page = 1;
      this.getlist();
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/ .el-table th > .cell,
/deep/ .el-table .cell {
  text-align: center;
}
/deep/ .el-button--primary:nth-of-type(1) {
  background-color: #0655ce;
  border-color: #0655ce;
}
/deep/ .el-checkbox__input.is-checked .el-checkbox__inner,
/deep/ .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #0655ce;
  border-color: #0655ce;
}
/deep/ .el-button--text {
  color: #0655ce;
}
/deep/ .el-input.is-disabled .el-input__inner {
  color: #333;
}
.main {
  margin: 20px;
  background: #fff;
  .title {
    display: flex;
    align-items: center;
    height: 62px;
    font-size: 14px;
    margin: 0 20px;
    .serbox {
      margin-right: 10px;
    }
  }
  .table {
    margin: 0 20px 20px 20px;
  }
  /deep/ .el-table--fit {
    border: 1px solid #eee;
    border-bottom: none;
  }
  .page {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
  }
}
</style>